<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双色球示例</title>
    <style>
        button {
            width: 100px;
            height: 40px;
            line-height: 40px;
            font-size: 24px;
            font-weight: 700;
            margin: 10px;
        }

        td {
            width: 60px;
            font-size: 20px;
            font-weight: 700;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        .blue {
            color: blue;
        }

        .red {
            color: red;
        }
    </style>
</head>

<body>
    <button id="choose-btn">选号</button>
    <button id="clear-btn">清空</button>
    <table border="1">
        <tr>
            <td id="num1" class="blue"></td>
            <td id="num2" class="blue"></td>
            <td id="num3" class="blue"></td>
            <td id="num4" class="blue"></td>
            <td id="num5" class="blue"></td>
            <td id="num6" class="blue"></td>
            <td id="num7" class="red"></td>
        </tr>
    </table>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
        let timer;
        let count = 1;
        $('#choose-btn').on('click', function () {
            timer = setInterval(function () {
                if (count < 7) {
                    $('#num' + count).html(randomNumer('blue'));
                }

                if (count == 7) {
                    $('#num7').html(randomNumer('red'));
                    window.clearInterval(timer);
                }
                count++;
            }, 1000);

            $('#choose-btn').attr('disabled', 'disabled');
        })

        $('#clear-btn').click(function () {
            $('td').html('');
            count = 1;
            $('#choose-btn').removeAttr('disabled');
        });

        function randomNumer(typeName) {
            let num = typeName == 'blue' ? 33 : 16;

            let randNum = Math.ceil(Math.random() * num);

            return randNum < 10 ? '0' + randNum : randNum;
        }
    </script>
</body>

</html>